<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动</title>
</head>
<body>
<div>
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所   少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所
    少时诵诗书所所所所所所所所所

</div>
<script src="jquery-1.11.2.min.js"></script>
<script>
 /*   当用户滚动指定的元素时，会发生 scroll 事件。
    scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
    scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
  $(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)
  $(document).scrollLeft() 这是获取水平滚动条的距离



  要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

  要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()
  就可以知道已经滚动到底端了



  注意：$(window).height()　　和　　$(document).height()的区别

  jQuery(window).height()代表了当前可见区域的大小，
  jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

  注意：当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
  jQuery(window).height() 随之改变，但是
  jQuery(document).height()是不变的。


    */
    var scrolled = false;
    $(window).on('scroll', function () {
        if (scrolled)        //防止重入
            return false;
        scrolled = true;     //锁定函数
        var wScrollY = window.scrollY;
        var wInnerH = window.innerHeight;
        var bScrollH = document.body.scrollHeight;
        if (wScrollY + wInnerH >= bScrollH) {
            alert('')
        }
        //延时解锁，不能直接解锁的原因是此时第二个函数调用
        //还在消息队列里，此处直接解锁等于没有上锁
        setTimeout('scrolled=false', 1);
    })
</script>
</body>
</html>